<template>
    <div class="freight page">
        <form-header :title="'运费设置'"></form-header>
        <div class="content">
            <div class="address">
                <cube-radio-group>
                    <cube-radio
                            hollow-style
                            v-for="(option, index) in options"
                            :key="index"
                            :option="option"
                            v-model="selected">
                        <div class="sub" @click="edit()">
                            <div class="word">
                                <div class="title">{{option.label}}</div>
                                <div class="describe">{{option.describe}}</div>
                            </div>
                            <div>
                                <img @click.stop="edit()" v-if="option.edit" src="../../assets/goodsMsg/bianji.png"/>
                            </div>
                        </div>
                    </cube-radio>
                </cube-radio-group>
            </div>

        </div>
        <div class="addBtn" @click="add">
            <img src="../../assets/goodsMsg/add.png"/>
            新增运费方案
        </div>
    </div>
</template>

<script>
    import formHeader from '@/components/form-header'
    export default {
        components:{formHeader},
        name : "freight",
        data(){
            return{
                selected: '1',
                options: [
                    {
                        label: '包邮',
                        value: '1',
                        describe:'全国所有地区免邮',
                        edit:false
                    },
                    {
                        label: '包邮（除偏远地区）',
                        value: '2',
                        describe:'偏远地区：新疆,西藏,内蒙古,海南,宁夏,甘肃,青海,港澳地区',
                        edit : true
                    },
                    {
                        label: '默认运费模板',
                        value: '3',
                        describe:'默认运费：1件运费3元，每增加1件运费减少10%',
                        edit:true
                    }
                ]
            }
        },
        methods:{
            edit(){
            },
            add(){
                this.$createActionSheet({
                    data: [
                        {
                            content: '按件数计费'
                        },
                        {
                            content: '按重量计费'
                        }
                    ],
                    onSelect: (item, index) => {
                        this.$createToast({
                            txt: `Clicked ${item.content}`,
                            type: 'correct',
                            time: 1000
                        }).show()
                    },
                    onCancel: () => {
                        this.$createToast({
                            txt: `Clicked canceled`,
                            type: 'warn',
                            time: 1000
                        }).show()
                    }
                }).show()
            }
        }
    }
</script>

<style scoped lang="stylus">
.freight
    background-color $page-bg
    .content
        margin-top 1.44rem
        background-color  #EEEEEE
        /*height 100vh*/
        .address
            .sub
                display flex
                justify-content space-between
                width 100%
                img
                    width 0.80rem
                    height 0.80rem
                .word
                    .title
                        color #333333
                        font-size 0.37rem
                    .describe
                        color #999999
                        font-size 0.29rem
    .addBtn
        position fixed
        width 100%
        background-color #fff
        bottom 0
        color #333333
        font-size 0.40rem
        display flex
        justify-content center
        align-items center
        height 1.31rem
        img
            width 0.45rem
            height 0.45rem
            margin-right 0.21rem
    /deep/.cube-radio-hollow.cube-radio_selected .cube-radio-ui::before
        color #00A398
    /deep/.cube-radio-hollow.cube-radio_selected .cube-radio-ui i::before
        background-color #00A398
    /deep/.cube-radio-input
        pointer-events:none
</style>